<script setup lang="ts">
import axios from 'axios'
import { ref, computed, reactive } from 'vue'

const email = ref('')
const text = ref('')

function login(): void {
  const ts = document.getElementById('ts1')
  if (email.value.length < 1) {
    ts.innerHTML = '邮箱不能为空'
    setTimeout(() => {
      ts.innerHTML = ''
    }, 2000)
    return
  }
  if (text.value.length < 1) {
    ts.innerHTML = '密码不能为空！'
    setTimeout(() => {
      ts.innerHTML = ''
    }, 2000)
    return
  }

  const params = new URLSearchParams()
  params.append('email', email.value)
  params.append('auth', text.value)
  axios.post('/api/login/auth', params).then(
    (res) => {
      a.value=true
      if (res.data.msg) {
        setTimeout(() => {
          localStorage.setItem('token', res.data.token)
          localStorage.setItem('user', email.value)
          location.reload()
          window.open('/home','_self')
        },1000)

      } else {
        a.value=false
        ts.innerHTML = res.data.token
        setTimeout(() => {
          ts.innerHTML = ''
        }, 2000)
      }
    }
  )

}

function auth(): void {
  const ts = document.getElementById('ts1')
  const params = new URLSearchParams()
  params.append('email', email.value)
  params.append('k', '1')
  axios.post('/api/auth', params).then(
    (res) => {
      ts.innerHTML = res.data.msg
      setTimeout(() => {
        ts.innerHTML = ''
      }, 2000)
    }
  )
}

const totalTime = 60               // 倒计时时间
const countingDown = ref(false)     // 倒计时状态

// 倒计时剩余时间
const remainingTime = reactive({
  seconds: totalTime
})

// 计时器变量
let timer: NodeJS.Timeout | null = null

// 倒计时
const startCountingDown = () => {
  if (!countingDown.value) {
    countingDown.value = true
    remainingTime.seconds = totalTime
  }
  timer = setInterval(() => {
    if (remainingTime.seconds > 0) {
      remainingTime.seconds--
    } else {
      stopCountingDown()
    }
  }, 1000)
}

// 倒计时停止
const stopCountingDown = () => {
  if (timer) {
    clearInterval(timer)
    timer = null
    countingDown.value = false
  }
}

// 按钮文字切换
const btnText = computed(() => (countingDown.value ? remainingTime.seconds + '秒' : '获取验证码'))

const bc = ref(false)
const btnTime = () => {
  const ts = document.getElementById('ts1')
  if (email.value.length < 1) {
    ts.innerHTML = '请先输入邮箱'
    setTimeout(() => {
      ts.innerHTML = ''
    }, 2000)
    return
  }
  startCountingDown()
  bc.value = true
  auth()
}
const a = ref(false)

</script>

<template>
  <div class="mm-container" v-loading="a">
    <div class="input">
      <input placeholder="邮箱" v-model="email" type="email" />
    </div>
    <div class="input a">
      <input placeholder="验证码" v-model="text" type="text" style="width: 65%;
    margin-right: 5%;" />
      <el-button :disabled="bc1" type="info" round style="width: 120px;height: 40px" @click="btnTime">{{ btnText }}
      </el-button>
    </div>
    <div id="ts1"></div>
    <div class="button">
      <el-button type="info" round @click="login">登录&#47;注册</el-button>
    </div>
  </div>
</template>

<style scoped>

/deep/ .el-loading-mask {
  background-color: rgb(59 59 59 / 81%);
}

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {

  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  transition: background-color 50000s ease-in-out 0s;
  -webkit-text-fill-color: aliceblue;
}

.input.a {
  display: flex;

}

/deep/ .el-input__inner {
  color: #ffffff;
  background-color: transparent;
}

.mm-container {
  width: 100%;
  height: 100%;
  padding: 10% 10% 5%;
}

.input {
  width: 80%;
  margin: 0 auto 20px;
}

.button {
  width: 100%;
  text-align: center;
  margin-top: 20px
}

.input input {
  background-color: #ffffff00;
  border: 0;
  border-bottom: 1px solid white;
  width: 100%;
  height: 40px;
  padding-top: 12px;
  font-size: 15px;
  color: #ffffff;
}

.input input[type="email"]:focus {
  outline: none;
  background-color: rgba(0, 0, 0, 0);
  border: 0;
  border-bottom: 1px solid #ffffff;
}

.input input[type="text"]:focus {
  outline: none;
  background-color: rgba(0, 0, 0, 0);
  border: 0;
  border-bottom: 1px solid #ffffff;
}

.el-button.is-round {
  width: 303px;
  height: 45px;
}

#ts1 {
  width: 80%;
  text-align: center;
  margin: 0 auto;
  height: 25px;
}
</style>